<template>
    <view class="container">
        <image
            class="coupon-img"
            :src="$setting.imageUrl() + 'getCoupon.jpg'"
            mode="widthFix"
        />
        <view class="top_box">
            <text
                v-if="couponDetail.coupon_type.value === 20"
                class="money_text"
            >
                {{ couponDetail.discount }}<text class="yuan">折</text>
            </text>
            <text
                v-else
                class="money_text"
            >
                {{ reduceMoney }}<text class="yuan">元</text>
            </text>
            <view class="coupon_type">
                <text class="coupon_type_text">
                    {{ couponType }}
                </text>
            </view>
            <image
                class="coupon_details"
                :src="$setting.imgUrl() + '/static/inviting/coupon_details.png'"
                mode="heightFix"
                @click="showPop = true"
            >
            </image>
        </view>
        <view class="bottom_box">
            <button
                class="u-reset-button"
                @click="postCounpon"
            >
                <image
                    v-if="couponDetail.is_get"
                    class="invite"
                    :src="$setting.imageUrl() + 'useNow.png'"
                    mode="heightFix"
                ></image>
                <image
                    v-else
                    class="invite"
                    :src="$setting.imageUrl() + 'redeemNow.png'"
                    mode="heightFix"
                ></image>
            </button>
        </view>
        <u-popup
            v-model="showPop"
            mode="center"
            :mask-close-able="false"
        >
            <view>
                <view
                    class="oneOfDetailInCustomNew flex u-row-between flex-align-center"
                    :key="index"
                >
                    <view class="youHuiQuanLeft">
                        <view class="unit">
                            <text
                                class="unit"
                                v-if="couponDetail.coupon_type.value === 20"
                            >
                                {{ couponDetail.discount }}折
                            </text>
                            <text
                                class="unit"
                                v-else
                            >
                                <text class="small">￥</text>{{ reduceMoney }}
                            </text>
                        </view>
                        <view class="arrive">{{ couponType }}</view>
                    </view>
                    <view style="margin: 0 40rpx">
                        <view
                            class="ling"
                            style="font-size: 22rpx"
                            v-for="item in rangeText"
                            :key="item"
                        >
                            <view>{{ item }}</view>
                        </view>
                    </view>
                </view>
                <view class="advertisement-close">
                    <image
                        @click="showPop = false"
                        class="advertisement-image"
                        src="@/static/x.png"
                    ></image>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            options: {},
            couponDetail: {},
            userInfo: {},
            rangeText: [],
            reduceMoney: 0,
            couponType: '',
            showPop: false,
        };
    },
    async onLoad(options) {
        let optionsTemp = options;
        if (!uni.$u.test.isEmpty(options.scene)) {
            optionsTemp = this.getScene(options.scene);
        }
        uni.setStorageSync('referee_id', optionsTemp.uid);
        this.options = optionsTemp;
        await this.$onLaunched;
        this.getHttp();
    },
    onShow() {},
    methods: {
        getHttp() {
            this.getCouponDetail();
        },
        async getCouponDetail() {
            try {
                const { coupon_id } = this.options;
                const { model = {} } = await uni.$u.api.getCouponDetail({
                    coupon_id,
                });
                this.couponDetail = model;
                const { apply_range_text = '', supplier_range_text = '' } =
                    this.couponDetail;
                this.rangeText = [apply_range_text, supplier_range_text].filter(
                    (i) => i
                );
                this.couponType = this.dealWithText(
                    this.couponDetail.min_price
                );
                this.reduceMoney = this.dealWithPrice(
                    this.couponDetail.reduce_price
                );
            } catch (error) {
                uni.showToast({
                    title: '该活动已结束',
                    icon: 'none',
                });
            }
        },
        async postCounpon() {
            try {
                if (this.couponDetail.is_get) {
                    uni.switchTab({
                        url: '/pages/categoty/categoty',
                    });
                    return;
                }
                if (!this.couponDetail.is_get) {
                    const { coupon_id } = this.options;
                    const res = await uni.$u.api.postCoupon({
                        coupon_id,
                    });
                    uni.showToast({
                        title: '领取成功',
                        icon: 'none',
                    });
                    this.getCouponDetail();
                }
            } catch (error) {
                console.log(error);
            }
        },
        dealWithText(min_price) {
            if (min_price && min_price !== '0.00') {
                const arr = min_price.split('.');
                const text = arr[1] === '00' ? arr[0] : min_price;
                return `满${text}可用`;
            } else {
                return '无门槛';
            }
        },
        dealWithPrice(price) {
            const arr = price.split('.');
            const curPriceText = arr[1] === '00' ? arr[0] : price;
            return curPriceText;
        },
        // 处理小程序码参数
        getScene(scene) {
            let scene_new = decodeURIComponent(scene);
            let info = {};
            var list = scene_new.split('&');
            for (var i = 0; i < list.length; i++) {
                info[list[i].split(':')[0]] = list[i].split(':')[1];
            }
            return info;
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    background-color: #f13738;
    position: relative;
    .bottom_box {
        position: absolute;
        top: 78%;
        left: 0;
        width: 100%;

        image {
            margin: auto;
            display: block;
        }

        .strategy {
            height: 26rpx;
        }

        .invite {
            height: 80rpx;
            margin: 26rpx auto;
        }
    }

    .maskshow {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        z-index: 2;
    }

    .userqrcode {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        z-index: 3;
        border-radius: 20rpx;
    }
}
.top_box {
    position: absolute;
    top: 32%;
    left: 0;
    width: 100%;
    color: #f42003;
    font-weight: bold;
    text-align: center;
    image {
        margin: auto;
        display: block;
    }

    .coupon {
        height: 42rpx;
    }

    .coupon_details {
        height: 16rpx;
        margin-top: 16rpx;
    }
}
.money_text {
    font-size: 110rpx;
    line-height: 80rpx;
}
.coupon_type {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10rpx;
}
.coupon_type_text {
    display: inline-flex;
    box-sizing: border-box;
    padding: 4rpx 20rpx;
    border-radius: 6rpx;
    font-size: 32rpx;
    color: #fff;
    background-color: #f4250f;
}
.yuan {
    font-size: 60rpx;
}
.coupon-img {
    width: 100%;
}
.oneOfDetailInCustomNew {
    width: 100%;
    height: 120rpx;
    margin-bottom: 10rpx;
    border-radius: 6px;
    opacity: 1;
    background: linear-gradient(270deg, #ff2129 0%, #ff5555 67%);
    padding: 10rpx;
}
.ling {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    // text-align: center;
    letter-spacing: 0em;
    color: #ffffff;
    padding-right: 10rpx;
}
.advertisement-close {
    margin-top: 50rpx;
    text-align: center;
    .advertisement-image {
        border-radius: 50%;
        border: 2px solid #fff;
        width: 40rpx;
        height: 40rpx;
    }
}
/deep/.u-mode-center-box {
    background-color: transparent !important;
}
.youHuiQuanLeft {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 200rpx;
    height: 100rpx;
    background-size: 100% 100%;

    background-image: url();
    .unit {
        font-family: PingFang SC;
        font-size: 24px;
        font-weight: normal;
        line-height: 28px;
        letter-spacing: 0em;
        color: #ee3a32;
        .small {
            font-size: 16px;
        }
    }
    .arrive {
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0em;
        color: #ee3a32;
    }
}
</style>
